<template>
  <a-modal v-model="visible" centered :title="modalTitle" @ok="handleOk" @cancel="handleCancel">
    <a-form-model ref="rulesForm" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }" :model="form" :rules="rules">
    <template v-if="modalType=='swap'">
        <a-form-model-item label="更换搭配师" prop="fashionerId">
          <a-select v-model="form.fashionerId" show-search :filter-option="filterOption">
            <a-select-option :value="item.code" v-for="item in filter.fashioner" :key="item.code">
              {{ item.name }}
            </a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="更换理由" prop="remark">
          <a-textarea
            v-model="form.remark"
            placeholder="请填写更换理由"
            :auto-size="{ minRows: 3, maxRows: 5 }"
          />
        </a-form-model-item>
        <a-form-model-item label="通知双方搭配师" class="hidden-label">
          <a-checkbox @change="onChangeNotifyFashioner">
            通知双方搭配师
          </a-checkbox>
        </a-form-model-item>
    </template>
    <template v-if="modalType=='joinS'">
        <a-form-model-item label="特殊类型" prop="reasonId">
          <a-select v-model="form.reasonId" show-search :filter-option="filterOption" >
            <a-select-option :value="reason.code" v-for="reason in speReasonList" :key="reason.code">{{ reason.name }}</a-select-option>
          </a-select>
        </a-form-model-item>
    </template>
    <template v-if="modalType=='joinB'">
      <a-form-model-item label="拉黑原因"  prop="reasonId">
        <a-select v-model="form.reasonId" @change="reasonIdChange" show-search :filter-option="filterOption">
          <a-select-option :value="reason.code" v-for="reason in blackReasonList" :key="reason.code">{{ reason.name }}</a-select-option>
        </a-select>
      </a-form-model-item>
        <a-form-model-item label="具体说明" prop="reason">
          <a-select v-model="form.reason" show-search :filter-option="filterOption">
            <a-select-option :value="item.name" v-for="item in blackDescriptionList" :key="item.code">{{ item.name }}</a-select-option>
          </a-select>
        </a-form-model-item>
    </template>
    </a-form-model>
  </a-modal>
</template>
<script>
  import { batchChangeFashioner, batchJoinCategory, getJoinCategoryReasonByCode} from '@api/box/member'
export default {
  props: {
    filter: {
      type: Object,
      default: {}
    },
    modalVisible: {
      type: Boolean,
      default: false
    },
    modalType: {
      type: String,
      default: ''
    },
    selectedRows: {
      type: Array,
      default: []
    },
    speReasonList: {
      type: Array,
      default: []
    },
    blackReasonList: {
      type: Array,
      default: []
    }
  },
  data () {
    return {
      visible: false,
      modalTitle: '',
      changeList: [],
      changePerson: '',
      changeRemark: '',
      form: {
        fashionerId: '',
        remark: '',
        reasonId: '',
        reason: ''
      },
      blackDescriptionList: [],
      notifyFashioner: false,
      rules: {
        fashionerId: [
          { required: true, message: '请选择', trigger: 'change' }
        ],
        remark: [
          { required: true, message: '请输入', trigger: 'blur' }
        ],
        reasonId: [
          { required: true, message: '请选择', trigger: 'change' }
        ],
        reason: [
          { required: true, message: '请输入', trigger: 'blur' }
        ],

      },
    }
  },

  watch: {
    modalVisible (value, oldvalue) {
      if (value) {
        this.visible = true
        this.initialModal()
      }
    }
  },
  created () {
  },
  methods: {
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      );
    },
    onChangeNotifyFashioner(e) {
      this.notifyFashioner = e.target.checked
    },
    initialModal () {
      switch (this.modalType) {
        case 'swap':
            this.modalTitle = '变更搭配师'
            break
        case 'joinS':
            this.modalTitle = '加入特殊名单'
            break
        case 'joinB':
            this.modalTitle = '加入黑名单'
            break
      }
    },
    handleOk () {
      this.$refs.rulesForm.validate(valid => {
        if (valid) {
          switch (this.modalType) {
            case 'swap': // 变更搭配师
              this.handleBatchChangeFashioner()
              break
            case 'joinS': // 加入特殊名单
              this.handleBatchJoinCategory('joinS')
              break
            case 'joinB':
              this.handleBatchJoinCategory('joinB')
              break
          }
          this.$refs.rulesForm.resetFields();
          this.close()
        } else {
          console.log('error submit!!');
          return false;
        }
      })
    },

    // 批量变更搭配师
    handleBatchChangeFashioner() {
      // this.$emit('refreshList')
      const data = {
        requestData: {
          fashionerId: this.form.fashionerId,
          remark: this.form.remark,
          customerIds: this.selectedRows,
          notifyFashioner: Number(this.notifyFashioner)
        }
      }
      batchChangeFashioner(data).then((res) => {
        if (res.code === 0) {
          this.$emit('refreshList')
        } else {
          this.$message.error(res.data.msg)
        }
      })
    },

    // 加入特殊/黑名单
    handleBatchJoinCategory(type) {
      let data = {}
      let comData = {
        customerIds: this.selectedRows,
        reasonId: this.form.reasonId,
      }
      if (type === 'joinS') { // 特殊
        data = {
          requestData: {
            ...comData,
            categoryId: 58,
            reason: this.speReasonList.filter(e => this.form.reasonId == e.code)[0].name
          }
        }
        this.$store.commit('ADD_CUSTOMER_STATUS_LIST', 'Special')
      } else { // 黑名单
        data = {
          requestData: {
            ...comData,
            categoryId: 57,
            reason: this.form.reason
          }
        }
        this.$store.commit('ADD_CUSTOMER_STATUS_LIST', 'Black')
      }
      batchJoinCategory(data).then((res) => {
        if (res.code === 0) {
          this.$emit('refreshList')
        } else {
          this.$message.error(res.data.msg)
        }
      })
    },

    //根据黑名单code获取原因
    getJoinCategoryReasonByCo(code) {
      this.blackDescriptionList = []
      const data = {
        code
      }
      getJoinCategoryReasonByCode(data).then((res) => {
        if (res.code === 0) {
          this.blackDescriptionList = res.data
        } else {
          this.$message.error(res.data.msg)
        }
      })
    },

    reasonIdChange() {
      this.getJoinCategoryReasonByCo(this.form.reasonId)
    },
    handleCancel () {
      this.$refs.rulesForm.resetFields();
      this.close()
    },
    close () {
      this.$emit('closeModal', true)
      this.visible = false
    }
  }
}
</script>
<style lang="less" scoped>
  .hidden-label{
  /deep/ .ant-form-item-label{
    visibility: hidden;
  }
  }
</style>
